<template>
  <div class="awsCenter" style="background-color: #f6f6f6">


    <div style="
          width: 75%;
          height: 840px;
          border: 0px black solid;
          margin-top: 30px;
          border-radius: 25px;
          background-color: white;
          overflow-y: auto; /* 允许滚动 */
          overflow-x: hidden; /* 禁止横向滚动 */
      ">

        <!--   标题     -->
       <div style="display: flex;flex-direction: row;margin-left: 30px;margin-top: 20px">

         <div style="display: flex;flex-direction:row;width: 100%;border: black 0px solid">
           <text style="font-weight: bold;font-size: 20px;">咨询预约</text>
           <div style="width: 16px;  /* 圆形盒子的直径 */
                 height: 16px; /* 圆形盒子的直径 */
                 backgroundColor: #8adba0;
                 borderRadius: 50%;  /* 使盒子成为圆形 */
                 margin-top: 6px;
                 margin-left: 10px;
                 margin-right: 10px;
                ">
           </div>

         </div>

<!--         <text style="margin-left: 20px;margin-top: auto;color: #4A4A4A;">没有人是一座孤岛，每个人都需要心理咨询</text>
         <svg style="margin-left: auto;margin-top: auto" width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path><path fill="currentColor" d="M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"></path></svg>
         <text style="margin-top: auto;margin-left: 5px;margin-right: 30px">
           心理咨询师入驻 1000+ 精选咨询师
         </text>-->

         <!--   搜索框   -->
         <div style="width: 100%;display: flex;border: 0px solid black;height: 40px">
           <el-form style="margin-left: auto;margin-right: 10px" :data="couForm" label-position="left">
             <el-form-item  prop="specialty" label="领域筛选">
               <el-select v-model="couForm.specialty" style="width: 200px" clearable ><!--绑定，即当选择框的值改变时couForm.specialty会被更新-->
                 <el-option
                     v-for="item in specialtyList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                 />
               </el-select>
             </el-form-item>
           </el-form>

           <el-button color="#ec8061" @click="listCou" plain style="margin-right: 30px" type="primary">查 询</el-button>
         </div>
       </div>



      <!--  咨询师卡片组    -->
      <div style="width: 100%; border: 0px solid black; display: flex; flex-direction: column;margin-left: 45px">
        <!-- 每行卡片 -->
        <div v-if="CounselorsList.length!=0" v-for="(line,i) in CounselorsList" :key="i" style="display: flex; flex-direction: row"><!--存储中有数据时，才这个部分-->
          <!-- 单个咨询师卡片 -->
          <div
              v-for="(item, j) in line"
              :key="j"
              class="card"
              :style="{
                    width: line.length < 4 ? '250px' : '250px',
                    height: '500px',
                    margin: '30px',
                    borderRadius: '10px',
                    display: 'flex',
                    flexDirection: 'column'
                }"
          >
            <!-- 头像 -->
            <div style="width: 100%; height: 230px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
              <div style="width: 100%; height: 100%; overflow: hidden; border-radius: 20px;background-color: #f6f6f6">
                <el-image v-if="item.avatar" :src="item.avatar" style="width: 100%; height: 100%; object-fit: cover; object-position: center;"></el-image>
                <el-image v-else src="/src/assets/moren.jpg" style="width: 100%; height: 100%; object-fit: cover; object-position: center;"></el-image>
<!--                <div v-else class="awsCenter">
                  <div style="display: flex;flex-direction: column">
                    <el-icon style="margin-top: 70px;margin-left: 5px"><icon-picture /></el-icon>
                  </div>

                </div>-->
              </div>
            </div>

            <!-- 咨询师信息 -->
            <div style="width: 100%;height: 200px; border: 0px solid black; padding: 20px 10px 10px; display: flex;margin-bottom: 10px;
             flex-direction: column; flex-grow: 1;margin-top: 20px;border-radius: 20px;background-color: #f6f6f6">
              <div style="display: flex;flex-direction: row">
                <text>{{ item.name }}</text><!--绑定咨询师的姓名-->
                <text style="margin-left: auto; font-size: 12px">评分：<el-tag style="width: 40px; height: 20px; margin-bottom: 4px">{{ formatToTwoDecimalPlaces(item.rating) }}</el-tag></text>
              </div>

              <text style="margin-top: 10px">累计帮助 {{ item.number?item.number:0 }}人</text><!--若存在，则显示该数值；如果不存在，则显示0-->
              <text style="margin-top: 6px">专业领域：{{ item.specialty }}</text>

              <!-- 限制简介部分的显示 -->
              <div style="margin-top: 10px; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">
                <span style="font-size: 14px; display: inline-block; max-height: 30px; line-height: 15px;">咨询师简介：{{ item.bio ? item.bio : '暂无' }}</span>
              </div>
            </div>

            <div class="awsCenter" style="width: 100%; margin: 3px">
              <el-button type="primary" color="#8adba0" @click="getCou(i, j)">
                <text style="color:white;">立即预约</text>
              </el-button>
            </div>
          </div>
        </div>

        <div v-else>
          <el-empty style="width: 100%;height: 600px" description="暂无" />
        </div>
      </div>

        <!--对话框组件-->
        <el-dialog @close="cleanAll" v-model="showAppointment" title="选择预约时间" width="520" center>
          <div>
            <h3>可预约时间段</h3>
            <el-table :data="availableSlots" style="width: 100%">
              <el-table-column prop="room" label="咨询室" />
              <el-table-column prop="weekend" label="星期" />
              <el-table-column prop="starttime" label="开始时间" />
              <el-table-column prop="endtime" label="结束时间" />
              <el-table-column prop="isavailable" label="是否可预约" v-slot="{ row }">
                <template v-if="row.isavailable === 1">
                  <el-checkbox v-model="row.selected" @change="updateSelectedSlots(row)">
                    选择
                  </el-checkbox>
                </template>
                <template v-else>
                  已预约
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!--用于定义对话框的底部内容-->
          <template #footer>
            <div class="dialog-footer">
              <el-button plain color="#8adba0"  @click="showAppointment = false"><text>取消</text></el-button>
              <el-button color="#8adba0" type="primary" @click="appointment">
                <text style="color:white;">完成预约</text>
              </el-button>
            </div>
          </template>
        </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useUserStore} from "@/stores/user/user";//获取当前登录用户信息
import {onMounted, ref} from "vue";//在组件挂载后执行代码
import {appointmentService, listCouService} from '@/api/appointment.js'
import moment from "moment";//引入 moment 库，用于格式化时间
import {ElMessage} from "element-plus";//用于弹出消息框
import { Picture as IconPicture } from '@element-plus/icons-vue'

//管理与用户相关的状态（例如用户信息、登录状态
const userStore=useUserStore()

const availableSlots = ref([]);//用于存储可用的预约时段

//重置预约时段相关的状态
const cleanAll=(()=>{
  listCou()//用于重新加载或获取预约时段数据
  availableSlots.value=[]
  selectedSlots.value=[]
})

onMounted(()=>{

  listCou()
})

//将数字格式化为保留两位小数的字符串
function formatToTwoDecimalPlaces(num) {
  if (num){
    return Number(num).toFixed(2);
  }else{
    return '暂无'
  }

}

//存储查询条件
const couForm=ref({
  specialty:''
})
//存储查询到的咨询师列表
const CounselorsList=ref([])
//查询咨询师列表
const listCou=(async ()=>{
  const res=await listCouService(couForm.value)
  if (res.code===200){
    CounselorsList.value=res.data
  }
})

//弹出预约时间并且赋值
const showAppointment=ref(false)
const getCou=((i,j)=>{

  const one=CounselorsList.value[i][j]
  console.log("当前选择的咨询师")
  console.log(one)
  for (let k = 0; k < one.counselorscheduleList.length; k++) {
    one.counselorscheduleList[k].starttime=moment(one.counselorscheduleList[k].starttime).format('hh:mm:ss')
    one.counselorscheduleList[k].endtime=moment(one.counselorscheduleList[k].endtime).format('hh:mm:ss')
  }//存储了该咨询师预约时间安排的列表。
  availableSlots.value=one.counselorscheduleList//用来存储当前咨询师可用预约时间段的数组。

  fix()

  showAppointment.value=true
})

//修改 availableSlots.value 中每个时间段的 weekend 字段。
const fix=(()=>{
  availableSlots.value.forEach(item=>{  //遍历多个预约时段的数组
    weekendList.value.forEach(week=>{
      if (item.weekend==week.value){
        item.weekend=week.label
      }
    })
  })
})


const weekendList = ref([
  {
    label: '星期一',
    value: '1'
  },
  {
    label: '星期二',
    value: '2'
  },
  {
    label: '星期三',
    value: '3'
  },
  {
    label: '星期四',
    value: '4'
  },
  {
    label: '星期五',
    value: '5'
  }
])

//进行预约
//选中的咨询师
const selectedSlots=ref([])
//用来处理用户点击“预约”按钮
const appointment=(async ()=>{
  if (selectedSlots.value.length==0){ //表示用户没有选择任何时间段，系统提示用户“请先选择要预约的时间
    ElMessage.warning("请先选择要预约的时间")
  }else if (selectedSlots.value.length>1){
    ElMessage.warning("只能选择一个时间段预约")
  }else {
    console.log(selectedSlots.value)
    const body={
      scheduleid:selectedSlots.value[0].scheduleid,
      counselorid:selectedSlots.value[0].counselorid,
      userid:userStore.user.userid,
    }
    const res=await appointmentService(body)
    if (res.code===200){
      ElMessage.success("预约成功")
      await listCou()//调用 listCou() 重新加载咨询师列表
      showAppointment.value=false//关闭预约界面
    }

  }
})

const updateSelectedSlots = (slot: AvailableSlot) => {  //表示一个可用的时段
  if (slot.selected) {  //如果 slot.selected 为 true，则说明用户选择了该时段
    selectedSlots.value.push(slot);
  } else {  //如果 slot.selected 为 false，则表示用户取消了该时段的选择
    const index = selectedSlots.value.findIndex(s => s.id === slot.id);//查找当前时段的索引
    //如果找到了该时段（即 index !== -1），则通过 splice 方法将该时段从 selectedSlots.value 数组中移除。
    if (index !== -1) {
      selectedSlots.value.splice(index, 1);
    }
  }
};

const specialtyList=ref([
  {
    value: '心理健康',
    label: '心理健康',
  },
  {
    value: '婚姻和家庭',
    label: '婚姻和家庭',
  },{
    value: '职业发展',
    label: '职业发展',
  },
  {
    value: '教育和学术',
    label: '教育和学术',
  },
  {
    value: '健康和营养',
    label: '健康和营养',
  }
])

</script>

<style>
.awsCenter{
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  transition: transform 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
}

.card:hover {
  //transform: translateY(-10px); /* 向上移动10px */
  //box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>